<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<title></title>
</head>
<body>
<div id="app">
	<a>姓名</a>
	<el-input v-model="input" placeholder="请输入姓名"
	style='width: 150px;' suffix-icon="el-icon-user-solid"></el-input>
	</br></br>
	<a>班级</a>
	<el-radio-group  v-model="radio_class">
		<el-radio-button v-for='(c,i) in class_group':key="i":label='c'>{{c}}</el-radio-button>	
	</el-radio-group>
	</br></br>
	<a>性别</a>
	<el-radio-group  v-model="radio_sex">
		<el-radio-button v-for='(s,i) in sex_group':key="i":label='s'>{{s}}</el-radio-button>
	</el-radio-group>
	</br></br>
	<!-- <el-checkbox-group v-model="hobby_list">
	    <el-checkbox label="复选框 A"></el-checkbox>
	    <el-checkbox label="复选框 B"></el-checkbox>
	    <el-checkbox label="复选框 C"></el-checkbox>
	  </el-checkbox-group></br> -->
	  <el-checkbox-group v-model="hobby_list">
	     <el-checkbox v-for="(h,i) in hobby_group":key="i":label='h'></el-checkbox>
	   </el-checkbox-group></br>
	<el-button @click="show">点我</el-button>
</div>
<script>
//点击按钮弹窗显示输入框内容
	new Vue({
		el:'#app',
		data:{
			input:'',
			radio_class:'',
			class_group:['移动互联1901','移动互联1902','移动互联1903'],
			radio_sex:'',
			sex_group:['男','女'],
			hobby_list:[],
			hobby_group:['水枪','火枪','电枪']
		},
		methods:{
			show:function(){
				// alert(this.radio_class);
				alert(this.radio_class+this.radio_sex+this.hobby_list);
			}
		}
	})

</script>
</body>
</html>
